// 装修店铺
<template>
     <div class="search">
    <Row>
      <Col>
        <Card>
          <Row class="operation">
            <Button @click="getDataList" icon="md-refresh">刷新</Button>
            <Button @click="add" type="primary">添加</Button>
          </Row>
            <Row>
            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort"></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
         <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="700">
             <Form ref="formadd" :model="formadd" :label-width="100" :rules="formRules" >
                <FormItem label="用户名" prop="username">
                  <Input type="text" v-model="formadd.username" placeholder="请输入用户名" />
              </FormItem>
              <FormItem label="用戶昵称" prop="nickName">
                <Input v-model="formadd.nickName" placeholder="请输入用户昵称" />
             </FormItem>
              <FormItem label="手机号码" prop="mobile" v-if="modalType === 0">
                <Row type="flex" justify="space-between">
                    <Input v-model="formadd.mobile" placeholder="请输入手机号" style="width: 80%;" />
                    <CountDownButton
                        ref="countDown"
                        @on-click="sendSmsCode"
                        :autoCountDown="false"
                        size="large"
                        :loading="sending"
                        :text="getSms"
                    />
                </Row>
                
             </FormItem>
             <FormItem label="验证码" prop="code" v-if="modalType === 0">
                <Input v-model="formadd.code" placeholder="请输入验证码" />
             </FormItem>
             <FormItem label="性别" prop="sex">
                <Select v-model="formadd.sex" style="width: 100%;">
                  <Option value="0">女</Option>
                  <Option value="1">男</Option>
                </Select>
             </FormItem>
             <FormItem label="个人简介" prop="individualResume">
                <Input v-model="formadd.individualResume" type="textarea"/>
             </FormItem>
             </Form>
             <div slot="footer">
                <Button type="text" @click="modalVisible=false">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
            </div>
          </Modal>
      </Col>
    </Row>
    </div>
</template>

<script>
import { validateName } from "@/libs/validate";
import CountDownButton from "@/views/my-components/count-down-button";
import { validateMobile } from "@/libs/validate";
export default {
  components: {
    CountDownButton
  },
    data(){
      return{
        data:[],
        modalVisible:false,
        total:0,
        loading: true, // 表单加载状态
        submitLoading:false,
        modalType: 0,
        modalTitle: "",
        searchForm:{
          pageNumber:1,
          pageSize:10,
        },
        formadd:{
           ids:'',
           username:'',
           nickName:'',
           mobile:'',
           sex:'',
           individualResume: "",
           code: ""
        },
        formRules: {
            username: [{ required: true, message: "请输入用户名", trigger: "blur" },
            { validator: validateName, trigger: "blur" }],
            nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" },
            { validator: validateName, trigger: "blur" }],
            mobile: [{ required: true, message: "请输入手机号", trigger: "blur" },
                  { validator: validateMobile, trigger: "blur", message: "手机号格式不正确" }],
            sex: [{ required: true, message: "请选择性别", trigger: "change" }],
            individualResume: [{ required: true, message: "请输入个人简介", trigger: "blur" },
            { validator: validateName, trigger: "blur" }],
            code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        },
        getSms: "获取验证码",
        loading: false,
        sending: false,
        coding: false,
        columns: [
        // 表头
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "用户名",
          key: "username",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "用户昵称",
          key: "nickName",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "性别",
          key: "sex",
          minWidth: 120,
          sortable: false,
          render: (h,params)=> {
            if (params.row.sex === '0') {
                return h("span", "女")
            } else {
                return h("span", "男")
            }
          }
        },
        {
          title: "联系方式",
          key: "mobile",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "个人简介",
          key: "individualResume",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          minWidth: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    icon: "ios-create-outline",
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              ),
            ]);
          }
        }
        ],
        }
    },
    methods:{
      init(){
        this.getDataList()
      },
      //获取店铺列表
      getDataList(){
          this.loading = true;
          this.postRequest("/staffManagement/getStaffList",this.searchForm).then(res =>{
            this.loading = false;
              if(res.success){
                var arr = res.result.dataResult;
                for(let val of arr){
                  for(let i in val){
                    (val[i] === null) ? (val[i] = "-") : ""
                  }
                }
                this.data = res.result.dataResult;
                this.total = res.result.totalNumber;
              } else {
                this.data = [];
                this.total = 0;
              }
          })
      },
      edit(v){
        console.log(v)
        this.coding = false;
        this.modalType = 1;
        this.modalTitle = "编辑";
        this.formadd.ids = v.id
        this.formadd.username = v.username;
        this.formadd.nickName = v.nickName;
        this.formadd.mobile = v.mobile;
        this.formadd.sex = v.sex;
        this.formadd.individualResume = v.individualResume;
        this.modalVisible = true;
      },
      add() {
        this.$refs.formadd.resetFields();
        this.modalType = 0;
        this.modalTitle = "添加";
        this.modalVisible = true;
      },
      sendSmsCode() {
        var phone = this.formadd.mobile;
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            this.$Message.warning("手机号格式有误，请重新输入")
        } else {
            this.sending = true;
            this.getSms = "发送中";
            var data = {
                mobile: phone
            }
            this.postRequest("/common/captcha/sendRegistSmsCode", data).then(res=> {
                this.getSms = "获取验证码";
                this.sending = false;
                this.coding = true;
                if (res.success) {
                   this.$Message.success("发送短信验证码成功");
                    // 开始倒计时
                    this.$refs.countDown.startCountDown();
                }
            })
        }
        },
      //修改
      handleSubmit(){
        this.$refs.formadd.validate(valid=> {
          if (valid) {
            this.submitLoading = true;
            if (this.modalType === 0) {
              delete this.formadd.id;
              this.postRequest("/staffManagement/addStaff",this.formadd).then(res =>{
                console.log(res)
                this.submitLoading = false;
                if(res.success){
                  this.$Message.success("添加成功")
                  this.modalVisible = false
                  this.getDataList()
                } else {
                  this.$Message.error(res.message);
                  this.modalVisible = false
                }
              })
            } else {
              this.postRequest("/staffManagement/updateStaff", this.formadd).then(res=> {
                this.submitLoading = false;
                if (res.success) {
                  this.$Message.success("更新成功")
                  this.modalVisible = false
                  this.getDataList()
                } else {
                  this.$Message.error(res.message);
                  this.modalVisible = false
                }
              })
            }
          }
        })
         
         
      },
      remove (v) {
        this.$Modal.confirm({
            title: "确定删除",
            content: "确认删除该条数据吗？",
            loading: true,
            onOk: ()=> {
                var data = {
                    ids: v.id
                }
                this.postRequest("/staffManagement/removeStaff", data).then(res=> {
                    this.loading = false;
                    if (res.success) {
                        this.$Message.success("操作成功");
                        this.getDataList();
                        this.$Modal.remove();
                    } else {
                        this.$Message.error(res.message);
                        this,$Modal.remove()
                    }
                })
            }
        })
      },
      changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    //   this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    },
    mounted(){
       this.init() 
    }
}
</script>

<style lang="less" scoped>
.search {
    .operation {
        margin-bottom: 2vh;
    }
    .select-count {
        font-size: 13px;
        font-weight: 600;  
        color: #40a9ff;
    }
    .select-clear {
        margin-left: 10px;
    }
    .page {
        margin-top: 2vh;
    }
    .drop-down {
        font-size: 13px;
        margin-left: 5px;
    }
}
</style>